<template>
  <div class="block_1 flex-col">
    <div class="header flex-col justify-end">
      <!-- <div class="group_3 flex-row"><div class="box_1 flex-col"></div></div> -->
      <div class="image-wrapper_2 flex-row">
        <img
          class="image_1"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps1qd1wt58o5m2wn57ll5cr2dcvcxxxiv4kb772d2e1-9639-41a5-ae64-b21fd5e3fe7e"
        />
      </div>
    </div>
    <div class="body flex-col">
      <div class="list_2 flex-row">
        <div class="list-items_1 flex-col">
          <img
            src="https://gd-hbimg.huaban.com/cdbb45227904d62c2ceebc6b01e2f2786f10973223347-rbSEpE_fw658"
            alt=""
          />

          <div class="text-wrapper_1 flex-col">
            <span class="text_1">稀有款</span>
          </div>
        </div>
        <div class="list-items_1 flex-col">
          <img
            src="https://gd-hbimg.huaban.com/fefa550051e0e7ed9d614501ce5c5039789376bcc172-fAc46v_fw658"
            alt=""
          />

          <div class="text-wrapper_1 flex-col">
            <span class="text_1">隐藏款</span>
          </div>
        </div>
        <div class="list-items_1 flex-col">
          <img
            src="https://gd-hbimg.huaban.com/b563e773a920da92cc9eb415e76dd29d07342cfa203f7-xDH6FE_fw658"
            alt=""
          />

          <div class="text-wrapper_1 flex-col">
            <span class="text_1">至尊款</span>
          </div>
        </div>
        <div class="list-items_1 flex-col">
          <img
            src="https://gd-hbimg.huaban.com/6d6139c37f4271d967da5d140b59716b970e59ec2494f-5rvnZ9_fw658"
            alt=""
          />

          <div class="text-wrapper_1 flex-col">
            <span class="text_1">至尊款</span>
          </div>
        </div>
      </div>
      <span class="text_2">全部商品&nbsp;&gt;</span>
      <div class="image-wrapper_1 flex-col">
        <img
          class="image_2"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psaq2nuswa3xq7du3aok3fklkx1z4tn5fj4f5dd151-f1e8-4fa6-80ae-172a272f15e7"
        />
        <img
          class="image_3"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps9afpgs65zwb266q8ipskloysq3l3tvhgn8f3d0b26-d98a-4ce0-ab45-49a394b8b14d"
        />
      </div>
      <img
        class="image_4"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/psobj0pbnsy4mmu4ozzcm5pci4npau2aqyfa5f95af8-822f-47ae-840b-a6acf53399cd"
      />
      <div class="box_4 flex-col">
        <span class="text_3">A锥盒子</span>
        <div class="image-text_4 flex-row justify-between">
          <img
            class="label_1"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psiwy0skkxrhd9st4lb0lsl2uixj0r6kwk84e046f4-42e3-4913-a883-ad2f82c629b8"
          />
          <span class="text-group_1">69.00</span>
        </div>
      </div>
      <img
        class="image_5"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/pspnw8b6d3t9jywob9ls8kgx3m1tnen1cs6121c338-0b8f-40ea-a4d5-e96e2630016c"
      />
      <span class="paragraph_1"
        >Air&nbsp;Jordan全家桶<br />复刻季后赛、灰白迷彩、出租车看</span
      >
      <div class="group_4 flex-row justify-between">
        <button class="group_1 flex-col">
          <div class="image-text_5 flex-row justify-between">
            <img
              class="thumbnail_1"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psdqsbh9ncqo6hjt9wz8iguhp0b7aswd3ee850fd889-6c7c-4b63-8fc6-e44c4d634b11"
            />
            <span class="text-group_2">69.00</span>
          </div>
          <div class="box_6 flex-col"></div>
          <span class="text_4">一发入魂</span>
        </button>
        <button class="group_2 flex-col" @click="show1">
          <div class="group_5 flex-row">
            <div class="image-text_6 flex-row justify-between">
              <img
                class="thumbnail_2"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psioldvjvvjt4r3jlc6fioqnrm56cbwi2a05c8b6-a3a9-42cc-b448-32f7d3998e2b"
              />
              <span class="text-group_3">310.50</span>
            </div>
            <div class="section_1 flex-col"></div>
            <span class="text_5">五连绝世</span>
          </div>
          <div class="group_6 flex-row">
            <div class="block_2 flex-col"></div>
            <span class="text_6">原价：&nbsp;345.00</span>
            <img
              class="thumbnail_3"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psm75e6co650koe4ixpzy06gi8uasimrof2aa62a82-54b7-4f22-b8c3-27d9b61143ab"
            />
          </div>
        </button>
      </div>
      <!-- <div class="box_9 flex-col"></div> -->
    </div>
    <div class="zhemu">
      <van-overlay :show="show">
        <div class="wrapper">
          <div class="block">
            <div class="kuang">
              <span class="tuichu" @click="show2"> X </span>
              <div class="wenzi">
                <h4>用户协议</h4>
                <p>MR.WISH用户服务协议</p>
                <p>欢迎您注册MR.WISH平台账号并使用MR.WISH的服务！</p>
                <p>【特别提示】</p>
                <p>
                  本《MR.WISH用户服务协议》(以下简称“本协议“)是用户(或称为“您”)与解忧小铺（广州)信息科技有限公司(简称“MR.WISH”、“本公司”或“我们”)之间就注册MR.WISH平台用户账号及使用MR.wISH的各项服务等相天事
                </p>
              </div>
              <div class="consent">
                <input
                  type="checkbox"
                  name=""
                  id=""
                  v-model="flag"
                  class="begin"
                />
                <span> 同意</span>
                <a href=""> 《用户协议》</a>
              </div>
              <button
                :class="{
                  tongyi: true,
                  skyblue: flag,
                }"
                :disabled="!flag"
                @click="sub"
              >
                同意并继续
              </button>
            </div>
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      flag: false,
    };
  },
  methods: {
    if() {},
    show1() {
      this.show = !this.show;
      console.log("111");
    },
    show2() {
      this.show = !this.show;
      console.log("222");
    },
    sub() {
      console.log(1);
    },
  },
};
</script>

<style scoped>
.skyblue {
  background: skyblue !important;
}
.zhemu {
  z-index: 999;
}
.wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.block {
  width: 6rem;
  height: 7rem;
  background-color: #fff;
  border-radius: 00.15rem 0.15rem 0 0;
  display: flex;
  justify-content: center;
  /* z-index: 999; */
}

/* 遮幕布内部样式 */
.kuang {
  width: 5.6rem;
  height: 100%;
  /* background-color: aqua; */
  border-radius: 0.15rem 0.15rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* margin: 00.5rem; */
}
h4 {
  text-align: center;
  height: 0.5rem;
  /* line-height: ; */
}
.wenzi {
  height: 4.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* .wenzi p{
    height: 0.4rem;
    line-height: 00.4rem;
    display: flex;
  } */
.consent input {
  width: 0.2rem;
  height: 0.2rem;
}
.tuichu {
  /* text-align: right; */
  display: flex;
  justify-content: flex-end;
  margin-right: 00.2rem;
  font-weight: 600;
}
.tongyi {
  height: 0.8rem;
  margin-bottom: 0.2rem;
  width: 5.2rem;
  background-color: #a4adb3;
  margin: 0 auto;
  border-radius: 0.15rem;
  color: white;
}

html {
  font-size: 100px;
}

.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 7.5rem;
  height: 16.24rem;
  overflow: hidden;
}

.block_1 {
  background-color: rgba(255, 255, 255, 1);
  height: 16.27rem;
  width: 100%;
}

.header {
  width: 7.5rem;
  height: 1.49rem;
}

.group_3 {
  width: 6.5rem;
  height: 0.25rem;
  margin: 0.34rem 0 0 0.68rem;
}

.box_1 {
  width: 6.5rem;
  height: 0.25rem;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pso2h7koise5h6j6r74r1bf6b6kllmwoed5626f3b0-cd60-4b95-9a61-7012082d2e8b) -0.01rem -0.01rem
    no-repeat;
  background-size: 6.51rem 0.26rem;
}

.image-wrapper_2 {
  width: 0.16rem;
  height: 0.3rem;
  margin: 0.6rem 0 0 0.3rem;
}

.image_1 {
  width: 0.16rem;
  height: 0.3rem;
}

.body {
  width: 7.5rem;
  height: 14.24rem;
  overflow-y: auto;
  margin: 0.39rem 0 0.15rem 0;
}

.list_2 {
  width: 6.88rem;
  height: 1.6rem;
  margin-left: 0.3rem;
  justify-content: space-between;
}

.list-items_1 {
  height: 1.6rem;
  background-size: 100% 100%;
  margin-right: 0.16rem;
  width: 1.6rem;
  background-color: #e6e2ea;
}

.text-wrapper_1 {
  background-image: linear-gradient(
    180deg,
    rgba(238, 216, 187, 0.8) 0,
    rgba(238, 216, 187, 0.8) 0,
    rgba(255, 255, 255, 0.8) 75%,
    rgba(255, 255, 255, 0.8) 100%
  );
  border-radius: 5px 0px 5px 0px;
  height: 0.27rem;
  width: 0.64rem;
  margin: 0 0 0 0.96rem;
}

.text_1 {
  width: 0.47rem;
  height: 0.17rem;
  color: rgba(75, 49, 20, 1);
  font-size: 0.16rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.17rem;
  margin: 0.05rem 0 0 0.08rem;
}

.text_2 {
  width: 1.27rem;
  height: 0.25rem;
  color: rgba(149, 117, 51, 1);
  font-size: 0.26rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.26rem;
  margin: 0.19rem 0 0 3.2rem;
}

.image-wrapper_1 {
  background-image: linear-gradient(
    1deg,
    rgba(199, 218, 236, 0.64) 0,
    rgba(245, 233, 239, 0.64) 0,
    rgba(245, 233, 239, 0.64) 0,
    rgba(247, 226, 235, 0.64) 50.195312%,
    rgba(212, 233, 243, 0.64) 100%,
    rgba(212, 233, 243, 0.64) 100%
  );
  z-index: 3;
  height: 6.88rem;
  overflow: hidden;
  width: 6.88rem;
  position: relative;
  margin: 0.16rem 0 0 0.3rem;
}

.image_2 {
  width: 3.46rem;
  height: 1.01rem;
  margin: 4.86rem 0 0 1.72rem;
}

.image_3 {
  z-index: 45;
  position: absolute;
  left: 1.19rem;
  top: 1.01rem;
  width: 4.52rem;
  height: 4.48rem;
}

.image_4 {
  width: 6.88rem;
  height: 0.03rem;
  margin: 0.49rem 0 0 0.3rem;
}

.box_4 {
  box-shadow: 18px 0px 49px 0px rgba(0, 0, 0, 0.13);
  background-color: rgba(255, 255, 255, 1);
  width: 7.5rem;
  height: 1.9rem;
}

.text_3 {
  width: 1.16rem;
  height: 0.3rem;
  color: rgba(34, 34, 34, 1);
  font-size: 0.32rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.32rem;
  margin: 0.41rem 0 0 3.19rem;
}

.image-text_4 {
  width: 1.56rem;
  height: 0.35rem;
  margin: 0.41rem 0 0.43rem 2.9rem;
}

.label_1 {
  width: 0.26rem;
  height: 0.26rem;
  margin-top: 0.08rem;
}

.text-group_1 {
  width: 1.19rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.46rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.46rem;
}

.image_5 {
  width: 6.88rem;
  height: 0.03rem;
  margin-left: 0.31rem;
}

.paragraph_1 {
  width: 4rem;
  height: 0.54rem;
  color: rgba(21, 21, 21, 1);
  font-size: 0.24rem;
  text-align: left;
  line-height: 0.24rem;
  margin: 0.33rem 0 0 0.31rem;
}

.group_4 {
  width: 6.88rem;
  height: 0.95rem;
  margin: 0.33rem 0 0 0.3rem;
}

.group_1 {
  background-image: linear-gradient(
    270deg,
    rgba(185, 183, 229, 0.8) 0,
    rgba(185, 183, 229, 0.8) 0,
    rgba(182, 219, 255, 0.8) 100%,
    rgba(182, 219, 255, 0.8) 100%
  );
  border-radius: 10px;
  height: 0.95rem;
  width: 3.23rem;
}

.image-text_5 {
  width: 0.96rem;
  height: 0.21rem;
  margin: 0.38rem 0 0 0.46rem;
}

.thumbnail_1 {
  width: 0.16rem;
  height: 0.15rem;
  margin-top: 0.04rem;
}

.text-group_2 {
  width: 0.73rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.28rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.28rem;
}

.box_6 {
  background-color: rgba(34, 34, 34, 1);
  width: 0.02rem;
  height: 0.2rem;
  margin: -0.21rem 0 0 1.53rem;
}

.text_4 {
  width: 1.1rem;
  height: 0.27rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.28rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.28rem;
  margin: -0.24rem 0 0.34rem 1.67rem;
}

.group_2 {
  background-image: linear-gradient(
    270deg,
    rgba(182, 218, 255, 0.8) 0,
    rgba(182, 218, 255, 0.8) 0,
    rgba(185, 184, 230, 0.8) 100%,
    rgba(185, 184, 230, 0.8) 100%
  );
  border-radius: 10px;
  width: 3.23rem;
  height: 0.95rem;
}

.group_5 {
  width: 2.39rem;
  height: 0.26rem;
  margin: 0.22rem 0 0 0.42rem;
}

.image-text_6 {
  width: 1.07rem;
  height: 0.21rem;
  margin-top: 0.04rem;
}

.thumbnail_2 {
  width: 0.16rem;
  height: 0.15rem;
  margin-top: 0.04rem;
}

.text-group_3 {
  width: 0.84rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.28rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.2rem;
}

.section_1 {
  background-color: rgba(34, 34, 34, 1);
  width: 0.02rem;
  height: 0.2rem;
  margin: 0.04rem 0 0 0.08rem;
}

.text_5 {
  width: 1.1rem;
  height: 0.26rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.28rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.28rem;
  margin-left: 0.12rem;
}

.group_6 {
  width: 1.48rem;
  height: 0.19rem;
  margin: 0.13rem 0 0.15rem 0.88rem;
}

.block_2 {
  background-color: rgba(102, 102, 102, 1);
  width: 1.48rem;
  height: 0.01rem;
  margin-top: 0.1rem;
}

.text_6 {
  width: 1.31rem;
  height: 0.19rem;
  color: rgba(71, 71, 71, 1);
  font-size: 0.2rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.2rem;
  margin-left: -1.4rem;
}

.thumbnail_3 {
  width: 0.11rem;
  height: 0.12rem;
  margin: 0.05rem 0.77rem 0 -0.79rem;
}

.box_9 {
  background-color: rgba(0, 0, 0, 1);
  border-radius: 6px;
  width: 2.7rem;
  height: 0.12rem;
  margin: 0.44rem 0 0 2.4rem;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}
body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
}
button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

button:active {
  opacity: 0.6;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-start {
  display: flex;
  justify-content: flex-start;
}
.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-around {
  display: flex;
  justify-content: space-around;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.align-start {
  display: flex;
  align-items: flex-start;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-end {
  display: flex;
  align-items: flex-end;
}

/* 自己写的代码 */
.list-items_1 > img {
  width: 1.6rem;
}
</style>
